<template>
<div style="text-align:center;margin-top:120px">
    <h2>good</h2>
    <el-form status-icon ref="form" :model="form" :rules="rules" label-width="80px" class="el_form">
    <h3>{{forgetPsw?'验证手机':'欢迎登陆'}}</h3>
        <el-form-item label="账号" prop="username">
            <el-input type="text" placeholder="请输入用户名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!forgetPsw">
            <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone" v-if="forgetPsw">
            <el-input type="text" placeholder="请输入手机号码" v-model="form.phone"></el-input>
        </el-form-item>
    </el-form>
    <div style="margin-left:10px;margin-top:30px">
        <span class="span" @click="submit('form')">{{forgetPsw?'验证':'登陆'}}</span>
        <span class="span" @click="reset('form')">重置</span>
        <span class="span2" @click="goregister()">没有账号？去创建</span>
        <span class="span3" @click="forgetpsw()">{{forgetPsw?'返回登陆':'忘记密码？'}}</span>
    </div>
</div>
</template>

<script>
export default {
    name:'login',
    data(){
        var checkPhone = (rule, value, callback) => {
            if(value.length == 11 && (Number(value)+1).toString()!='NaN'){
                callback()
            }else if(value.length > 11 && (Number(value)+1).toString()!='NaN'){
                this.form.phone=value.slice(0,11)
                callback()
            }else{
                callback(new Error('请输入正确的手机号'))
            }
        };
        return{
            forgetPsw:0,
            form:{
                username:'',
                password:'',
                phone:'',
            },
            rules:{
                username:[{
                    required:true,
                    message:'请输入用户名',
                    trigger:'blur'
                }],
                password:[{
                    required:true,
                    message:'请输入密码',
                    trigger:'blur'
                }],
                phone: [{
                    required: true,
                    validator: checkPhone,
                    trigger: 'blur'
                }],
            }
        }
    },
    methods:{
        reset(data) {
            this.$refs[data].resetFields();
        },
        goregister(){
            this.$router.push({name:'register'})
        },
        submit(data){
            this.$refs[data].validate((valid)=>{
                if(valid){
                    if(this.forgetPsw){
                        this.$addr.get(`user/forget_psw`,{
                            params:{
                                username:this.form.username,
                                phone:this.form.phone
                            }
                        }).then(
                            response=>{
                                console.log('验证手机号请求成功',response.data);
                                if(response.data.state == 4001){
                                    this.$message({
                                        message:response.data.message,
                                        type:'error'
                                    }) 
                                }else if(response.data.state == 4006){
                                    this.$message({
                                        message:response.data.message,
                                        type:'error'
                                    }) 
                                }else{
                                    this.$message({
                                        message:'恭喜您，验证成功',
                                        type:'success'
                                    })
                                    this.$addr.get(`sms/${this.form.username}/${this.form.phone}/1332081/send`).then(
                                        response=>{
                                            console.log('发送验证码请求成功',response.data);
                                            this.$router.push({name:'sendCode',params:{'username':this.form.username,'phone':this.form.phone,'fromLogin':1}})
                                        },error=>{
                                            this.$router.replace({name:'login'})
                                            this.$message({
                                                message:'发送验证码请求失败，请重新登陆',
                                                type:'error'
                                            })
                                            console.log("发送验证码请求失败",error.message);
                                        }
                                    )
                                }
                            },
                            error=>{
                                this.$message({
                                    message:'验证手机号请求失败',
                                    type:'error'
                                })
                                console.log("验证手机号请求失败",error.message);
                            }
                        )
                    }else{
                        this.$addr.get(`user/login`,{
                            params:{
                                username:this.form.username,
                                password:this.form.password
                            }
                        }).then(
                            response=>{
                                console.log('登陆请求成功',response.data);
                                if(response.data.state == 4001){
                                    this.$message({
                                        message:response.data.message,
                                        type:'error'
                                    }) 
                                }else if(response.data.state == 4002){
                                    this.$message({
                                        message:response.data.message,
                                        type:'error'
                                    }) 
                                }else{
                                    this.$message({
                                        message:'恭喜您，登陆成功',
                                        type:'success'
                                    })
                                    this.$router.replace({name:'persion'})
                                }
                            },
                            error=>{
                                this.$message({
                                    message:'登陆请求失败',
                                    type:'error'
                                })
                                console.log("登陆请求失败",error.message);
                            }
                        )
                    }
                }
            })
        },
        forgetpsw(){
            this.reset('form')
            this.forgetPsw=!this.forgetPsw
        }
    },
    mounted(){
        if(this.$route.params.username != null){
            this.form.username=this.$route.params.username
        }
    },
}
</script>

<style scoped>
.span{
    margin-left: 5px;
    font-size: 13px;
    background-color: rgb(255, 199, 153);
    padding: 15px;
    border-radius: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    cursor: pointer;
}
.span2{
    margin-left: 10px;
    font-size: 10px;
    color: rgb(43, 138, 255);
    cursor: pointer;
}
.el_form{
    width: 230px;
    margin: 0px auto;
}
.span3{
    position: absolute;
    font-size: 10px;
    color: rgb(43, 138, 255);
    margin-left: -80px;
    margin-top: 40px;
}
</style>